<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <title>权限管理</title>
  {% include 'rbac/common/main-header.html' %}
</head>
<body>
<div style="padding: 16px">
  <div class="layui-card">
    <div class="layui-card-body">
      <table
        class="layui-hide"
        id="rights-treeTable"
        lay-filter="rights-treeTable"
      ></table>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="rights-toolbar">
  <div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="rights-add">
      新增权限
    </button>
    <div class="layui-btn-group">
      <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="rights-close">
        <i class="layui-icon layui-icon-screen-restore"></i>
        全部折叠
      </button>
      <button type="button" class="layui-btn layui-btn-sm layui-bg-orange" lay-event="rights-open">
        <i class="layui-icon layui-icon-screen-full"></i>
        全部展开
      </button>
    </div>
  </div>
</script>
<script type="text/html" id="rights-tool">
  <div class="layui-btn-container">
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-blue"
      lay-event="rights-edit"
    >
      <i class="layui-icon layui-icon-edit"></i>编辑
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-red"
      lay-event="rights-remove"
    >
      <i class="layui-icon layui-icon-delete"></i>删除
    </button>
  </div>
</script>
{% include 'rbac/common/main-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["treeTable", "popup", "form"], function () {
      let treeTable = layui.treeTable;
      let popup = layui.popup;
      let $ = layui.$;
      let form = layui.form;

      // 权限列表
      treeTable.render({
        elem: "#rights-treeTable",
        url: "/api/v1/rights/treetable/",
        height: "full-35",
        toolbar: "#rights-toolbar",
        // page: true,
        cols: [
          [
            {
              field: "id",
              title: "ID",
              width: 80,
              sort: true,
              fixed: "left",
            },
            {field: "name", title: "权限名", width: 180},
            {field: "code", title: "权限标识", width: 180},
            {
              field: "kind",
              title: "类型",
              width: 100,
              align: "center",
              templet: (d) => {
                if (d.kind === "menu") {
                  return `<span class="layui-badge layui-bg-green">菜单</span>`;
                } else if (d.kind === "menu-z") {
                  return `<span class="layui-badge layui-bg-blue">节点</span>`;
                } else if (d.kind === "auth") {
                  return `<span class="layui-badge-rim">权限</span>`;
                }
              },
            },
            {field: "url", title: "访问地址", width: 220},
            {
              field: "icon_sign",
              title: "图标",
              width: 90,
              align: "center",
              templet: (d) => {
                return `<i class="${d.icon_sign}"></i> `;
              },
            },
            {field: "open_type", title: "打开方式", width: 100, hide: true},
            {
              field: "sort", title: "排序", width: 60, align: "center", templet: (d) => {
                if (d.kind === "menu") {
                  return `<span style="color:#16baaa">${d.sort}</span>`
                } else if (d.kind === "menu-z") {
                  return `<span style="color:#1e9fff">${d.sort}</span>`
                } else {
                  return `<span>${d.sort}</span>`
                }
              }
            },
            {field: "remark", title: "备注", width: 180, align: "center",},
            {
              field: "is_enabled",
              title: "是否启用",
              width: 100,
              align: "center",
              templet: (d) => {
                return `<input type="checkbox"
                               name="is_enabled"
                               value="${d.id}"
                               title="启用|禁用"
                               lay-skin="switch" ${d.is_enabled ? "checked" : ""}
                               lay-filter="rights-table-switch-status"/>`;
              },
            },
            {
              fixed: "right",
              title: "操作",
              width: 150,
              align: "center",
              toolbar: "#rights-tool",
            },
          ],
        ],
      });

      // 头部工具栏事件 - 新增部门、..
      treeTable.on("toolbar(rights-treeTable)", function (obj) {
        // console.log(obj);
        if (obj.event === "rights-add") {
          window.rights_add();
        } else if (obj.event === "rights-close") {
          treeTable.expandAll('rights-treeTable', false); // 关闭全部节点
        } else if (obj.event === "rights-open") {
          treeTable.expandAll('rights-treeTable', true); // 展开全部节点
        }
      });

      // 行工具栏事件 - 编辑、删除
      treeTable.on("tool(rights-treeTable)", function (obj) {
        // console.log(obj);
        if (obj.event === "rights-edit") {
          window.rights_edit(obj);
        } else if (obj.event === "rights-remove") {
          window.rights_remove(obj);
        }
      });

      window.rights_add = function () {
        let url = "/rbac/rights/add.html/";
        layer_open("新增权限", url, "820px", "750px");
      };

      window.rights_edit = function (obj) {
        // console.log(obj);
        let url = "/rbac/rights/edit.html/?id=" + obj.data.id;
        layer_open("编辑权限", url, "820px", "750px");
      };

      window.rights_remove = function (obj) {
        layer.confirm('确定要删除 [' + obj.data.name + '] 这个权限?', {icon: 3, title: '提示'}, function (index) {
          layer.close(index)
          let url = "/api/v1/rights/del/"
          let data = {id: obj.data.id}
          deleteAjaxRequest(popup, obj, url, data)
        })
      }

      // 复选框事件处理 >> 权限的 启用/禁用
      form.on("switch(rights-table-switch-status)", function (obj) {
        let operate = obj.elem.checked ? 1 : 0;
        let url = "/api/v1/rights/is_enabled/"
        let data = {id: obj.value, is_enabled: operate}
        let reload_table = "rights-treeTable"
        switchAjaxRequest(popup, url, data, reload_table)
      })
    }
  )
</script>
</html>
